Getting Started
Welcome to Reframe! The most advanced WordPress CV Resume Page Builder experience in existence. Like any software product, there is of course a learning curve, but thanks to the intuitive features, the extensive documentation, tutorial videos and customer support, we know you'll soon be building like a professional.
With this Quick Getting Started Guide, we want to help you quickly get started with your website, by listing the most essential things you need to do to get up and running.
Theme Installation
There are two ways you can install the Reframe theme. You can choose to install it via WordPress, which is what will be outlined right below, or alternatively, you can install it via FTP.
WordPress
Navigate to Appearance > Themes from the WordPress Dashboard.
Click the Add New button on top of the page, then the Upload Theme button.
Click Choose File and find the theme files you've just downloaded.
Once the file has been uploaded, click the Activate link.
Once activated, you will see a prompt to install and activate the required plugins. Click here to learn how to install the required plugins.
Note: If you've downloaded the installable WordPress file, then you do not need to unzip the file. If you've downloaded the Full Theme Package, you have to unzip the master reframe.zip file, therein you will see a secondary reframe.zip file. This is the one you select to install.
FTP
Log into your server installation via FTP. You can use software such as Filezilla for this.
If you have downloaded the Full Package from ThemeForest, please unzip the master Reframe.zip file and then unzip the secondary Reframe.zip file which will give a Reframe folder. If you download the Installable WordPress file only, simply unzip this, and you will have the same Reframe folder.
Using the FTP client, upload the extracted Reframe folder to the wp-content > themes folder on your server. Make sure the folder name is unchanged, so it's called Reframe. This will take a few minutes, depending on your connection speed and your server.
Log in to your WordPress Dashboard and navigate to Appearance > Themes and click the Activate button, for the Reframe theme.
Once activated, you will see a prompt to install and activate the required plugins. Click here to learn how to install the required plugins.
Plugin Installation
It's important to note the differences between required and recommended plugins. The two required plugins – Reframe Core and Elementor, are very important and must be installed and activated at all times for the theme to work properly and fully.
Click on Begin activating plugins as soon as the message appears at the top of the page. You will be redirected to the plugin installation and activation page.
Install all plugins required for the theme.
Activate all plugins required for the theme.
Note: The plugin installation message will only appear when the theme is activated and the required plugins are not activated already.
Demo Importing
Importing prebuilt websites is recommended to do on a fresh WordPress install. Importing a prebuilt website will not replace existing content like posts, pages, portfolios, etc.
Navigate to Appearance > One Click Demo Importer from the WordPress Dashboard.
Click on the button Import Demo Data to import all demo content and data.
Note: All required plugins must be activated otherwise the demo importer will not show up in your WordPress Dashboard.
Core Features
Theme Options
The options panel allows you to configure core features of the theme like loading screen, cursor, scrolling, profile picture, color scheme, and background. The options are organized into logical tabbed sections, and each option has a description of what it will do.
To access the theme options panel head to Appearance > Theme Options from the WordPress admin dashboard.
Note: Don't forget to save after you have made changes on the theme options panel.
Page Builder
Elementor is the leading visual website builder platform for professionals on WordPress with more than 2 million active users.
It replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode.
You can use the page builder by heading to Pages from your WordPress admin dashboard and by clicking on the Edit with Elementor button on the page you would like to edit.
Use the official Elementor Documentation to learn more about the page builder.
Contact Form
Creating a contact form can be achieved by using the Reframe Contact Form Widget in Elementor. Simply drag the widget to your page from the editor panel and use the controls to create a responsive form on your website.
You have to enter your Target Email in the widget settings to make the form fully functional. All form responses will be sent to the target email address.
Note: PHP mail() function support is required for the contact form to function.
Profile Picture
All settings for the profile picture can be found on your Theme Options page under the section Profile Picture.
You can generate your own individual hover effect by setting the Effect Mode to Custom and then by uploading a Custom Effect Image Source Map.
One Page Navigation
The Reframe One Page Menu is an Elementor Page Builder widget that will be used to create the one-page navigation. The widget can be placed anywhere on the page because it will be invisible in the non-editor view (The menu itself will be still visible in non-editor view). The navigation is already placed right at the top on the demo pages therefore you don't have to place it on these pages.
Let's get started and create our first menu item. You start by simply adding a link anchor and then linking to the anchor.
Note: The one-page navigation can only be used once on each page.
Adding a link anchor
At first, we have to set up an anchor otherwise we have no place to link to.
In Elementor, select the element to which you want to assign an anchor so that a new dashboard on the left will emerge with the element's settings.
In the Advanced tab, and in the Advanced section, look for the CSS ID option and write your ID name for the element.
Adding the link
After we have successfully added an anchor we can proceed to add a link to the one-page menu widget that links to the anchor.
In Elementor, select the Reframe One Page Menu widget, so that a new dashboard on the left will emerge with the element's settings.
Add a new menu item in the Content Tab. Make sure the item is set to Link Type: Internal.
Add your anchor ID inside the Target ID field.
Background
All background settings can be found on your Theme Options page under the section Background. You can set a different background for mobile devices in case you want to improve performance for mobile devices.
Color Scheme
Change between color schemes via the Theme Options page under the section Color Scheme. You can choose between 10 different color schemes.
Scroll Animations
An individual scroll animation can be added to each widget that is part of the page builder. The scroll animation can be found in the advanced widget settings.
Below you will find a step-by-step guide on how to add the scroll animation to a widget.
In Elementor, select the element to which you want to assign an animation so that a new dashboard on the left will emerge with the element's settings.
In the Advanced tab, and in the Scroll Animations section, you can modify and activate the scroll animation.
Note: Scroll Animations are not visible in the Elementor editor view.
Other
Assets In Use
Below you will find a list of third-party plugins or assets that are used as part of the Reframe theme.
WordPress
| Name | Description |
|---|---|
| Elementor | Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform. |
| Redux Framework | Next generation options framework made for WordPress core |
Javascript
| Name | Description |
|---|---|
| three.js | Lightweight, cross-browser, general purpose 3D library |
| GSAP | Professional-grade JavaScript animation for the modern web |
| jQuery | JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. |
| Tabslet | jQuery plugin for tabs, lightweight, easy to use and with some extra features |
| Accordion.js | A lightweight jQuery Accordion plugin |
| Slick | Touch enabled JavaScript plugin that lets you create beautiful responsive carousels |
| GLightbox | A touchable Javascript lightbox with mobile and video support |
Icons
| Name | Description |
|---|---|
| Themify Icons | Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons. |
| ET Line Icons | Line-style icon set ships with a total of 100 different icons |
Media
| Name | Description |
|---|---|
| pexels.com | The best free stock photos, royalty free images & videos shared by creators. |
| unsplash.com | The internet's source of freely-usable images. Powered by creators everywhere. |
| pixabay.com | Over 2.5 million+ high quality stock images, videos and music shared by our talented community. |
Contact & Support
Quickly contact us with any of your questions, queries, concerns or ideas. Please use the contact form on our profile to get in touch with us.